﻿<div class="demo-description" id="AllowUsersToSetIndeterminateState">
    <h2><DemoNavLink Link="CheckBox#AllowUsersToSetIndeterminateState" />CheckBox - Allow Users to Set Indeterminate State</h2>
    <p>
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.AllowIndeterminateStateByClick">AllowIndeterminateStateByClick</a> property to <b>true</b> to allow users to set the checkbox state to indeterminate.
    </p>
    <p>
        The state changes each time a user clicks a CheckBox: Indeterminate -> Checked -> Unchecked -> Indeterminate, and so on.
    </p>
    <p>
        This demo module also illustrates how to add custom content to the CheckBox’s <b>ChildContent</b> property and use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.DisableDefaultRender">DisableDefaultRender</a> property to hide the default check mark.
    </p>
</div>

<DxCheckBox @bind-Checked="@Value" AllowIndeterminateStateByClick="true" DisableDefaultRender>
    <div class="table position-relative">
        <div class="boxLabel" style="margin: 10px">Medium</div>
        <div class="row">
            <div class="boxLabel" style="margin: 10px">Low</div>
            <div class="flexBox demo-checkBox">
                <div class="borderContainer">
                    <div class="gradientCircle" />
                    <div class="markerContainer"><div class="roundMarkerHigh" /></div>
                    <div class="markerContainer" style="transform: rotate(-90deg)"><div class="roundMarkerMedium" /></div>
                    <div class="markerContainer" style="transform: rotate(-180deg)"><div class="roundMarkerLow" /></div>
                    <div class="flexBox" style="width:100%; transform: rotate(@(-Angle)deg); animation: turn@(Angle) 0.5s ease-out"><div class="light" /></div>
                    <div class="centerCircle" />
                    <div class="markerContainer" style="transform: rotate(@(-Angle)deg); animation: turn@(Angle) 0.5s ease-out"><div class="marker" /></div>
                </div>
                <div class="borderCyrcle" />
            </div>
            <div class="boxLabel" style="margin: 10px">High</div>
        </div>
    </div>
</DxCheckBox>

@code {
    bool? Value { get; set; } = true;
    int Angle { get { return Value == true ? 0 : Value == false ? 90 : 180; } }
}

<CodeSnippet_Editor_CheckBox_AllowIndeterminateState/>
